export function mapChartFun(cityname, datamap, zommN, geoCoordMap, customerBatteryCityData) {
	let mapOption = {
		geo: [{
				map: cityname,
				aspectScale: 1,
				zoom: zommN,
				layoutCenter: ["50%", "52%"],
				layoutSize: "180%",
				show: true,
				roam: false,
				label: {
					emphasis: {
						show: false,
					},
				},
				itemStyle: {
					normal: {
						borderColor: "#59CDF5",
						borderWidth: 2,
						shadowColor: "#016630",
						shadowOffsetY: 10,
						shadowBlur: 120,
						areaColor: "transparent",
					},
				}
			},
			// 重影
			{
				type: "map",
				map: cityname,
				zlevel: -1,
				aspectScale: 1,
				zoom: zommN,
				layoutCenter: ["50%", "53%"],
				layoutSize: "180%",
				roam: false,
				silent: true,
				itemStyle: {
					normal: {
						borderWidth: 1,
						// borderColor:"rgba(17, 149, 216,0.6)",
						borderColor: "#016630",
						shadowColor: "rgba(172, 122, 255,0.5)",
						shadowOffsetY: 5,
						shadowBlur: 15,
						areaColor: "#038C47",
					},
				},
			},
			{
				type: "map",
				map: cityname,
				zlevel: -2,
				aspectScale: 1,
				zoom: zommN,
				layoutCenter: ["50%", "54%"],
				layoutSize: "180%",
				roam: false,
				silent: true,
				itemStyle: {
					normal: {
						borderWidth: 1,
						// borderColor: "rgba(57, 132, 188,0.4)",
						borderColor: "#016630",
						shadowColor: "#038F49",
						shadowOffsetY: 5,
						shadowBlur: 15,
						areaColor: "transpercent",
					},
				},
			}
		],
		series: [
			{
				name: "沙坡头区数据",
				type: "map",
				map: cityname, // 自定义扩展图表类型
				aspectScale: 1,
				zoom: zommN, // 缩放
				showLegendSymbol: true,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: "#fff",
							fontSize: "120%"
						},
					},
					emphasis: {
						// show: false,
					},
				},
				itemStyle: {
					normal: {
						areaColor: {
							type: "linear",
							x: 1200,
							y: 0,
							x2: 0,
							y2: 0,
							colorStops: [{
									offset: 0,
									color: "#12AFB8", // 0% 处的颜色
								},
								{
									offset: 0.3,
									color: "#099A92", // 50% 处的颜色
								},
								{
									offset: 0.8,
									color: "#16B5C3", // 50% 处的颜色
								},
								{
									offset: 1,
									color: "#0A9F98", // 50% 处的颜色
								},
							],
							global: true, // 缺省为 false
						},
						borderColor: "#59F0FD",
						borderWidth: 0.2,
					},
					emphasis: {
						show: false,
						color: "#fff",
						areaColor: {
							type: "linear",
							x: 1200,
							y: 0,
							x2: 0,
							y2: 0,
							colorStops: [{
									offset: 0,
									color: "rgba(153, 255, 166, 1)", // 0% 处的颜色
								},
								{
									offset: 0.3,
									color: "rgba(153, 255, 166, 1)", // 50% 处的颜色
								},
								{
									offset: 0.8,
									color: "rgba(153, 255, 166, 1)", // 50% 处的颜色
								},
								{
									offset: 1,
									color: "rgba(153, 255, 166, 1)", // 50% 处的颜色
								},
							],
							global: true, // 缺省为 false
						},
					},
				},
				layoutCenter: ["50%", "52%"],
				layoutSize: "180%",
				markPoint: {
					symbol: "none",
				},
				data: datamap,
			},
			//柱状体的主干
			{
				type: 'lines',
				zlevel: 5,
				effect: {
					show: false,
					symbolSize: 8 // 图标大小
				},
				lineStyle: {
					width: 2, // 尾迹线条宽度
					color: 'rgba(216, 216, 216, 1)',
					opacity: 1, // 尾迹线条透明度
					curveness: 0 // 尾迹线条曲直度
				},
				label: {
					show: 0,
					position: 'end',
					formatter: '100'
				},
				// margin: [20, 20, 20, 20],
				silent: true,
				data: lineData()
			},
			// 柱状体的顶部
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				geoIndex: 0,
				zlevel: 5,
				label: {
					normal: {
						show: true,
						formatter: function(params) {
							console.log(params,'idshkshdkjshdjkshjdskdhskdjh')
							var name = params.data[2].name
							var condition = params.data[2].condition
							var temp = params.data[2].temp
							var humidity = params.data[2].humidity
							var rainRate = params.data[2].rainRate
							var pm25 = params.data[2].pm25
							// var text = `{tline|${name}}:{fline|${value}}`
							
							var text =`{fline|${condition}}` + `\r\n`
							text+= `{tline|温度}:{fline|${temp}}` + ` `
							text+= `{tline|湿度}:{fline|${humidity}}` + `\r\n`
							text+= `{tline|降雨概率}:{fline|${rainRate}%}` + ` `
							text+= `{tline| 雾霾浓度}:{fline|${pm25}}` 
							return text;
						},
						color: '#fff',
						backgroundColor: '#1D403B',
						borderColor: '#8BD1B6',
						borderWidth: 1,
						rich: {
							fline: {
								padding: [4, 4],
								color: '#fff',
								fontSize: 12,
								fontWeight: 400
							},
							tline: {
								padding: [4, 4],
								color: '#FFFFFF',
								fontSize: 11,
							},
						}
					},
					emphasis: {
						show: true
					}
				},
				itemStyle: {
					color: '#00FFF6',
					opacity: 1,
					margin: [20],
				},
				margin: [20],
				// symbol: img2,
				// symbolSize: [100, 50],
				// symbolOffset: [0, -20],
				backgroundColor: '#8BD1B6',
				z: 999,
				data: scatterData()
			},
			// 柱状体的底部
			{
				geoIndex: 0,
				zlevel: 4,
				type: 'effectScatter',
				coordinateSystem: 'geo',
				rippleEffect: {
					scale: 10,
					brushType: 'stroke',
				},
				showEffectOn: 'render',
				itemStyle: {
					normal: {
						color: '#00FFFF',
					}
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'bottom',
						color: '#fff',
						fontSize: 12,
						distance: 10,
						show: true,
					},
				},
				symbol: 'circle',
				symbolSize: [10, 5],
				itemStyle: {
					// color: '#F7AF21',
					color: '#FFEF2E',
					opacity: 1
				},
				data: scatterData2()
			},
		],
	};
	return mapOption

// 柱状体的主干
function lineData() {
	return customerBatteryCityData.map((item) => {
		// console.log({
		// 	coords: [geoCoordMap[item.name],
		// 		[geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
		// 	]
		// })
		return {
			coords: [geoCoordMap[item.name],
				[geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
			]
		}
	})
}

// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
	const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
	return 0.3
}
// 柱状体的顶部
function scatterData() {
	return customerBatteryCityData.map((item) => {
		return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight(), item]
	})
}
// 柱状体的底部
function scatterData2() {
	return customerBatteryCityData.map((item) => {
		return {
			name: item.name,
			value: geoCoordMap[item.name]
		}
	})
}
}

